// 引入 store2
import store from 'store2';
// 引入 useState
import {useState,useEffect} from 'react';
// 引入 axios 方法
import {getShoppingDetail} from '../../../api/admin';
// 引入 css 样式
import './index.css';
// 引入 Footer
import Footer from '../../../components/Footer/Index';
// 引入 Header
import Header from '../../../components/Header/Header';
// 引入路由方法
import {Router,Route} from 'react-router-dom';
import {FC} from 'react';

interface IndexProps{};

const Index:FC<IndexProps>=()=>{

  // 商品 id
  const [shoppingId,setShoppingId]=useState<number>(store.get('shoppingId'));

  // 商品详情数据
  interface shoppingDetailProps{
    id:number,
    name:string,
    price:number,
    coverImage:string,
    content:string,
  }
  const [shoppingDetail,setShoppingDetail]=useState<shoppingDetailProps>({
    id:0,
    name:'',
    price:0,
    coverImage:'',
    content:'',
  })

  useEffect(()=>{
    getShoppingDetail(shoppingId).then(res=>{
      setShoppingDetail(res.data.data);
    });
  },[]);

    return(
        <>
          <div className="Detail">
            <div className="conent">
            {/* 头部组件 */}
            <Header />
            {/* 页面内容 */}
            <div className="shoopingDetail">
              <div className="photo">
                <img src={shoppingDetail.coverImage} alt="" />
              </div>
              <p>{shoppingDetail.name}</p>
              <span>免邮费 顺丰快递</span>
              <h5>￥ {shoppingDetail.price}</h5>
              <div dangerouslySetInnerHTML={{ __html: shoppingDetail.content }}></div>
            </div>
            </div>
            {/* 尾部组件 */}
            <Footer />
          </div>
        </>
    )
}

export default Index;

